<template>
<div id="main-box">
    <div class="title">
        <van-row>
            <van-col span="2" offset="2">
                <van-icon name="arrow-left" style="margin-top:10px;" @click="back()" />
            </van-col>
            <van-col span="18" offset="1" > <van-search
                    show-action
                    placeholder="请输入搜索关键词"
                    @search="onSearch"
                    v-model="keys"
            >
                <template #action>
                    <div @click="onSearch(keys)">搜索</div>
                </template>
            </van-search></van-col>
        </van-row>
    </div>
    <div class="goods-info">
        <van-empty image="search" v-show="isEmpty" description="暂时没有商品哦..." />
        <template v-for="(item,i) in goodsInfo">
        <van-card
                :price="item.price.toFixed(2)"
                :title="item.title"
                :thumb="imgsrc+item.img"
                :key="i"
        >
            <template #footer>
                <van-button size="mini" type="danger" @click="buy(item.id)">立即购买</van-button>
            </template>
        </van-card>
        </template>
    </div>
</div>
</template>

<script>
    import img, {getSeachGoods} from "@/api/api"
    import {Toast} from "vant";
    export default {
        name: "searchGoodsDetail",
        data() {
            return {
                goodsInfo:[],
                keys:"",
                imgsrc:img.src,
                isEmpty:false,
            }
        },
        created() {
          this.goodsInfo=this.$route.query.goods;
          if(this.goodsInfo==undefined||this.goodsInfo==""||this.goodsInfo==null){
              console.log("sadas")
              this.isEmpty=true;
          }
        },
        methods:{
            back(){
                this.$router.back();
            },
            onSearch() {
                getSeachGoods(this.keys).then((response) => {
                    if(response.data.code==2000&&this.goodsInfo.length!=0){
                        this.goodsInfo = response.data.data.goodList;
                         this.isEmpty=false;
                    }else{
                        this.isEmpty=true;
                        Toast(response.data.message)
                    }
            })
            },
                buy(gid){
                    this.$router.push({path:'/goodDetail',
                            query:{
                                goodId:gid,
                                aid:0
                            }
                        },

                    )
            }
        }
    }
</script>

<style scoped>
#main-box{
    height:100%;
    background-color: white;
}
</style>